<template>
  <div class="stu-resume-container">

    <div class="filter-container">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="专业">
          <el-input v-model="queryParams.stuMajor" placeholder="请输入专业名称" clearable />
        </el-form-item>

        <el-form-item label="班级">
          <el-input v-model="queryParams.clazzName" placeholder="请输入班级名称" clearable />
        </el-form-item>

        <el-form-item label="工作经验">
          <el-input v-model="queryParams.resExperienceYear" placeholder="请输入工作年限" clearable />
        </el-form-item>

        <el-form-item label="学生姓名">
          <el-input v-model="queryParams.stuName" placeholder="请输入学生姓名" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" border style="width: 100%" v-loading="loading" :row-class-name="tableRowClassName">
      <el-table-column prop="stuName" label="姓名" align="center" />
      <el-table-column prop="clazzName" label="班级" align="center" />
      <el-table-column prop="resExperienceYear" label="工作经验(年)" align="center">
        <template #default="{ row }">
          {{ row.resExperienceYear || '无' }}
        </template>
      </el-table-column>
      <el-table-column prop="resFileName" label="简历名称" align="center"></el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum" :page-sizes="[5, 10, 20, 50]" :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { searchResumeApi } from '@/api/stu-api'

// 查询参数
const queryParams = ref<any>({
  stuMajor: null,
  clazzName: null,
  resExperienceYear: null,
  stuName: null,
  page: 1,
  size: 10
})

const tableData = ref([])
const total = ref(0)
const loading = ref(false)

// 获取学生简历列表
const getList = async () => {
  try {
    const response = await searchResumeApi(queryParams.value)
    console.log('获取学生简历列表成功:', response)
    tableData.value = response.data.list
    total.value = response.data.total
  } catch (error) {
    console.error('获取学生简历列表失败:', error)
  }
}

// 查询
const handleQuery = () => {
  queryParams.value.page = 1
  getList()
}

// 重置查询
const resetQuery = () => {
  queryParams.value = {
    stuMajor: null,
    clazzName: null,
    resExperienceYear: null,
    stuName: null,
    page: 1,
    size: 10
  }
  getList()
}

// 分页大小改变
const handleSizeChange = (val: any) => {
  queryParams.value.size = val
  getList()
}

// 当前页改变
const handleCurrentChange = (val: any) => {
  queryParams.value.page = val
  getList()
}

// 初始化加载
onMounted(() => {
  getList()
})

// 表格行样式
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  row
  if (rowIndex % 2 === 0) {
    return 'success-row'
  }
  return ''
}
</script>

<style>
.stu-resume-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>